<template>
  <div class="login-container">
    <div class="login_box">
      <div class="login_box_left">
        <img src="../assets/logo.png" alt="" />
      </div>
      <div class="login_box_right">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          label-width="0px"
          :rules="loginFormRules"
          v-if="isLogin == false"
        >
          <b class="login_welcome">欢迎登录</b>
          <el-form-item prop="username">
            <span>账号</span>
            <el-input
              v-model="loginForm.username"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <span>密码</span>
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>

          <div class="Forget_password">
            <a @click="changeType">没有账号？立即注册</a>
            <a @click="torouter('/login/forgetMM')">忘记密码</a>
          </div>
          <div class="login_introduce">
            <span>第三方登录</span>
            <a href=""><img src="../assets/icon/Wechat.png" alt="" /></a>
          </div>
          <button type="button" @click="login" class="login_button">
            登录
          </button>
        </el-form>
        <!-- 注册 -->
        <el-form
          ref="registerFormRef"
          :model="registerForm"
          :rules="registerFormRules"
          label-width="0px"
          v-if="isLogin == true"
          class="register"
        >
          <b class="login_welcome">注册账号</b>
          <el-form-item prop="username">
            <span>账号</span>
            <el-input
              v-model="registerForm.username"
              placeholder="请输入未注册的邮箱或手机号"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <span>密码</span>
            <el-input
              v-model="registerForm.password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <!-- 确认密码 -->
          <el-form-item prop="againpassword">
            <span>确认密码</span>
            <el-input
              v-model="registerForm.againpassword"
              placeholder="请再次输入密码"
            show-password
            ></el-input>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item prop="CAPTCHA" class="register_verification">
            <span>验证码</span>
            <el-input
              v-model="registerForm.CAPTCHA"
              placeholder="请输入验证码"
            ></el-input>
            <button @click="send_out" type="button" >|&nbsp;&nbsp;发送验证码</button>
          </el-form-item>

          <div class="register_agree">
            <span>注册即表示你同意</span>
            <a @click="open()">《服务协议》</a>
          </div>

          <button type="button" class="login_button" @click="register">
            快速开通
          </button>
          <a @click="changeType" class="tologin">已有账号？去登录</a>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      isLogin: false,

      loginForm: {
        username: "",
        password: "",
      },
      registerForm: {
        username: "",
        password: "",
        againpassword: "",
        CAPTCHA: "",
      },
      //这是表单的验证规则对象
      loginFormRules: {
        //验证用户名是否合法
        username: [
          // { required: true, message: "请输入登录名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
          {
            
            pattern: /^[1][3, 4, 5, 6, 7, 8][0-9]{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        password: [
          // { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      registerFormRules: {
        //验证用户名是否合法
        username: [
          // { required: true, message: "请输入登录账号", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
          {
          
            pattern: /^[1][3, 4, 5, 6, 7, 8][0-9]{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        password: [
          // { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        againpassword: [
          { required: true, message: "请再次输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        CAPTCHA: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            min: 6,
            max: 6,
            message: "长度是6位数字",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    torouter(address) {
      this.$router.push(address);
    },
    changeType() {
      this.isLogin = !this.isLogin;
      this.loginForm.username = "";
      this.loginForm.password = "";
    },
    open() {
      window.open("/服务协议.html");
    },
    async login() {
      const self = this;
      // let pwd = this.$md5(this.loginForm.password);
      let pwd = this.$md5(this.loginForm.password);
      console.log(pwd);
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/infoCustomer/doLogin",
        params: {
          username: self.loginForm.username,
          password: pwd,
        },
      });

      if (res.code != 200) {
        this.$message.error("登录失败！");
        return;
      }

      // window.sessionStorage.setItem("login", JSON.stringify(res.msg));
      window.localStorage.setItem("token", res.msg.tokenValue);
      window.localStorage.setItem("name", res.msg.nickName);
      window.localStorage.setItem("avatarUrl", res.msg.avatarUrl);

      this.$message.success("登录成功！");
      this.torouter("/home");
      console.log(res.msg.tokenValue);
    },
    async register() {
      console.log("注册");

      if (this.registerForm.password != this.registerForm.againpassword) {
        this.$message.error("两次密码不一致");
        return;
      }

      const self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "post",
        url: "/api/infoCustomer/register",
        data: {
          account: self.registerForm.username,
          password: self.registerForm.password,
          code: self.registerForm.CAPTCHA,
        },
      });

      console.log(res);
      if (res.code != 200) {
        this.$message.error(res.msg);
        return;
      }
      this.$message.success("注册成功！");
      this.isLogin = !this.isLogin;
    },

    keyDown(e) {
      //如果是回车则执行登录方法

      if (e.keyCode == 13) {
        if (this.isLogin) {
          this.register();
        } else {
          this.login();
        }
      }
    },
    async send_out() {
      const self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/infoCustomer/mobile",
        params: {
          mobile: self.registerForm.username,
        },
      });
      console.log(res);
      if (res.code == 200) {
        this.$message.success(res.msg);
      } else {
        this.$message.error("发送失败");
      }
    },
  },
  created() {
    //绑定事件
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown);
  },
};
</script>

<style lang="less" >
.login-container {
  background-color: rgb(53, 83, 147);

  height: 100%;
  width: 100%;
}

.login_box {
  width: 1280px;
  height: 580px;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}
.login_box_left {
  height: 100%;
  width: 50%;
  background-color: rgb(101, 147, 190);

  display: flex;
  img {
    height: 300px;
    width: 400px;

    margin: 140px 120px;

    background-color: #fff;
  }
}
.login_box_right {
  height: 100%;
  width: 50%;
  background-color: #fff;
  display: flex;

  .el-form {
    width: 60%;
    margin: auto;
    display: flex;
    flex-direction: column;

    .login_welcome {
      font-size: 33px;
      color: rgb(63, 104, 158);
      margin-bottom: 15px;
    }
    .el-form-item {
      display: flex;
      flex-direction: column;
      height: 73px;
      span {
        margin: 0px;
      }
    }
  }
}
.Forget_password {
  display: flex;
  height: 50px;
  justify-content: space-between;
  a {
    cursor: pointer;
    text-decoration: none;
    font-size: 17px;
  }
  a:nth-child(1) {
    color: rgb(0, 110, 255);
  }
  a:nth-child(2) {
    color: rgb(128, 128, 128);
  }
}
.login_introduce {
  height: 30px;
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  margin: 20px 0;
  img {
    height: 30px;
    width: 30px;
  }
}
.login_button {
  height: 40px;
  border-radius: 5px;
  border: none;
  background-color: rgb(63, 104, 158);
  color: #fff;
  font-size: 16px;
}

.register_verification {
  position: relative;

  button {
    position: absolute;
    top: 50px;
    right: 2px;
    background-color: #fff;
    border: none; // 去掉边框
    outline: none;
    font-size: 16px;
    cursor: pointer;
    color: rgb(53, 83, 137);
  }
}
.register_agree {
  margin: 20px 0px 10px 0px;

  a {
    cursor: pointer;
    text-decoration: none;
    color: rgb(0, 110, 255);
  }
}
.tologin {
  color: rgb(0, 110, 255);
  cursor: pointer;
  text-decoration: none;
  font-size: 17px;
  margin: 20px auto;
}
.register {
  .el-form-item {
    margin-bottom: 6px;
    height: 80px !important;
  }
}
</style>